import { Drawer, Input, Button, Skeleton, message } from 'antd';
import type { FC } from 'react';
import { useState, useEffect } from 'react';
import styles from './index.less';
import classnames from 'classnames';
import { LecturerSelect } from '@/pages/pc/components/form';
import { allGet } from '@/services/pc';
import Pagination from '@/pages/pc/components/Pagination';
import Empty from '@/pages/pc/components/Empty';

interface Props {
  onSubmit: (values: any[]) => boolean | Promise<boolean>;
  cid?: string | number;
}

const Index: FC<Props> = ({ children, onSubmit, cid }) => {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [keyword, setKeyword] = useState<string>();
  const [list, setList] = useState<any[]>([]);
  const [selectKeys, setSelectKeys] = useState<any[]>([]);
  const [count, setCount] = useState<any>(0);
  const [current, setCurrent] = useState(1);
  const pageSize = 20;
  const getData = async (keyword?) => {
    setLoading(true);
    const response = await allGet({
      params: {
        mod: 'baijiayun',
        do: 'list',
        version: 'pc1.0',
        page: current,
        perpage: pageSize,
        keyword,
      },
    });
    setLoading(false);
    if (response.success) {
      setCount(response?.count || 0);
      setList(response?.data?.list || []);
      //setList(response?.data || []);
    }
  };
  const onSelect = (selectKeys) => {
    setSelectKeys(selectKeys);
  };
  const handlePageChange = (page) => {
    setCurrent(page);
  };
  useEffect(() => {
    if (visible || current) {
      getData();
    }
  }, [visible, current]);
  const hanleClose = () => {
    setVisible(false);
    setCurrent(1);
    setSelectKeys([]);
  };
  const onOk = async () => {
    if (await onSubmit(selectKeys)) {
      message.success('添加成功');
      hanleClose();
    }
  };
  return (
    <>
      <Drawer
        title="视频库"
        className="c-drawer-container"
        width={480}
        visible={visible}
        onClose={hanleClose}
        footer={
          <div>
            <span>
              已选择<span className="text-yellow">{selectKeys.length}</span>个视频
            </span>
            {selectKeys.length > 0 && (
              <>
                {' '}
                /
                <span className={styles.clear} onClick={() => setSelectKeys([])}>
                  取消
                </span>
              </>
            )}
            <Button
              onClick={onOk}
              style={{ width: 120, height: 44, marginLeft: 12 }}
              size="large"
              type="primary"
            >
              添加至课程
            </Button>
          </div>
        }
      >
        <div>
          <Input.Search
            value={keyword}
            onChange={(evt) => setKeyword(evt.target.value)}
            className={classnames('c-input', styles.search)}
            onSearch={() => getData(keyword)}
          />
          {loading ? (
            <div style={{ marginTop: 24 }}>
              {Array(6)
                .fill(undefined)
                .map((_, index) => (
                  <Skeleton key={index} active />
                ))}
            </div>
          ) : (
            <>
              {list.length <= 0 ? (
                <Empty />
              ) : (
                <>
                  {' '}
                  <LecturerSelect list={list} value={selectKeys} onChange={onSelect} />
                  {count > pageSize && (
                    <Pagination
                      size="small"
                      pageSize={pageSize}
                      className={styles.pagination}
                      total={count}
                      current={current}
                      onChange={handlePageChange}
                    />
                  )}
                </>
              )}
            </>
          )}
        </div>
      </Drawer>
      <span className="text-pointer" onClick={() => setVisible(true)}>
        {children || (
          <div className={styles.button}>
            <div className={styles.icon} />
            <div className={styles.text}>视频库里添加</div>
          </div>
        )}
      </span>
    </>
  );
};
export default Index;
